<template>
    <div class="app-container">

        <el-card class="box-card" style="width:80%;margin:20px auto 0">
            <el-row class="treeFlex">
                <el-col :span="8">
                    <h5>{{ roleOptions.name }}</h5>
                    <el-input v-model="roleName" placeholder="请输入名称" clearable prefix-icon="el-icon-search"
                              style="margin-bottom: 20px; width: 90%" :style="isSize" />
                    <div class="scoll">
                        <el-tree :data="roleOptions.childrens" :props="defaultProps" @node-click="handleRoleNodeClick" ref="roleTree" :filter-node-method="filterRoleNode"
                        node-key="id" default-expand-all :style="isSize" ></el-tree>
                    </div>
                </el-col>
                <el-col :span="8">
                    <h5>菜单树</h5>
                    <el-input v-model="mnutName" placeholder="请输入名称" clearable prefix-icon="el-icon-search"
                              style="margin-bottom: 20px; width: 90%" :style="isSize" />
                    <div class="scoll">
                        <el-tree :data="mnutOptions.childrens" :props="defaultProps" @node-click="handleMunuNodeClick" ref="mnutTree" :filter-node-method="filterMuntNode"
                            node-key="id" default-expand-all :style="isSize"></el-tree>
                    </div>
                </el-col>
                <el-col :span="8">

                    <h5>档案树</h5>
                    <el-input v-model="treeName" placeholder="请输入名称" clearable prefix-icon="el-icon-search"
                              style="margin-bottom: 20px; width: 90%" :style="isSize" />
                    <div class="scoll">
                        <!-- :check-on-click-node="true" //点击节点的时候选中节点
                            :check-strictly="true" //在显示复选框的情况下，严格的遵循父子不互相关联的做法
                            @check="treeCheck" //选中后事件，在此事件中实现单选
                        -->
                        <el-tree :data="treeOptions" ref="checkTree" :props="defaultPropsTree" node-key="id" :filter-node-method="filterNode"
                            default-expand-all show-checkbox :style="isSize"> </el-tree>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-button type="primary" style="margin:30px auto 0;display: block;" @click="addTap">保 存</el-button>
    </div>
</template>
<script>

import {
    getroletree, getmunutreebyrole, gettreebyrolemenuxh, addtreeshouquan, gettreebyrolemenuxh2
} from "@/api/archive/archiveTreeDefinition.js"
export default {
    data() {

        return {
            roleOptions: [], //角色
            roleName: undefined,
            mnutOptions: [],//菜单
            mnutName: undefined,
            treeOptions: [],//档案树
            treeName: undefined,
            defaultProps: {
                children: 'childrens',
                label: 'name'
            },
            defaultPropsTree: {
                children: 'children',
                label: 'label'
            },
            roleID: "", //角色ID\
            menuID: "",//菜单Id
            parentCategoryIdList: []
        }
    },
    watch: {
      // 根据名称筛选角色树
      roleName(val) {
        this.$refs.roleTree.filter(val);
      },
      // 根据名称筛选菜单树
      mnutName(val) {
        this.$refs.mnutTree.filter(val);
      },
      // 根据名称筛选档案树
      treeName(val) {
        this.$refs.checkTree.filter(val);
      },
    },
    computed: {
        isSize() {
            if (this.$store.getters.size == 'small') {
                this.size = 'font-size: 12px;'
            } else {
                this.size = 'font-size: 14px;'
            }
            return this.size
        }


    },
    created() {
        this.getToletreePOST();
    },
    methods: {
        //获取角色树
        getToletreePOST() {
            getroletree().then(response => {
                this.roleOptions = response.data;
            });
        },
        // 筛选节点
        filterRoleNode(value, data) {
          if (!value) return true;
          return data.name.indexOf(value) !== -1;
        },
        /** 获取菜单树 */
        getmunutreebyrolePOST(ID) {
            getmunutreebyrole(ID).then(response => {
                this.mnutOptions = response.data;
            });
        },
        // 筛选节点
        filterMuntNode(value, data) {
          if (!value) return true;
          return data.name.indexOf(value) !== -1;
        },
        //获取选中角色,选中菜单的     档案树回显  chooesed==0 无回显数据  chooesed==1;有回显数据
        gettreebyrolemenuxhPOST(roleID, munuID) {
            gettreebyrolemenuxh(roleID, munuID).then(response => {
                this.treeOptions = response.data[0].children;
                //递归
                this.getParent(this.treeOptions[0])
                this.$refs.checkTree.setCheckedKeys(this.parentCategoryIdList);
            })
        },
        // 筛选节点
        filterNode(value, data) {
          if (!value) return true;
          return data.label.indexOf(value) !== -1;
        },
        //判断获取categoryId
        getParent(node) {
            //判断当前节点是否有children
            if (node.children != null) {
                for (var i in node.children) {
                    //如果是回显数据chooesed == 1
                    if (node.children[i].chooesed == 1) {
                        //如果子节点children==undefind,追加
                        if (node.children[i].children == undefined||!node.children[i].children.length) {
                            this.parentCategoryIdList.push(node.children[i].id)
                        }
                        // 递归调用 子节点上有子节点
                        this.getParent(node.children[i])
                    }

                }
            } else if (this.parentCategoryIdList.length === 0) {
                this.parentCategoryIdList = [];
            }

        },

        //角色点击事件
        handleRoleNodeClick(data, node) {
            console.log(data, node)
            this.roleID = data.id;
            this.mnutOptions = [],//菜单
            this.treeOptions = [],//档案树
            this.parentCategoryIdList = [];
            // this.$refs.roleTree.setCurrentKey(data.name)
            this.getmunutreebyrolePOST(data.id)
        },
        //菜单点击事件
        handleMunuNodeClick(data, node) {
            // console.log(data, node)
            this.menuID = data.id;
            this.parentCategoryIdList = [];
            this.gettreebyrolemenuxhPOST(this.roleID, data.id)
        },
        addTap() {
            let parentArr = this.$refs.checkTree.getHalfCheckedKeys();
            //    获取子节点未全选时的父节点id
            let childArr = this.$refs.checkTree.getCheckedKeys();
            //获取所有选中节点的id
            let permissionParams = {
                //获取全选中的id  //将两个数组进行拼接
                treeIds: parentArr.concat(childArr),
                roleId: this.roleID,
                menuId: this.menuID
            }
            addtreeshouquan(permissionParams).then(res => {
                if (res.code == "200") {
                    this.$modal.msgSuccess(res.msg);
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.treeFlex .el-col:nth-child(1) {
    border-left: none !important;
}

.treeFlex .el-col {
    // border-left: 1px solid #c0c0c0;


}

.treeFlex .scoll {
    height: calc(100vh - 380px); // 正确写法  #($rem)
    overflow-y: scroll;
}

.treeFlex h5 {
    font-weight: 600;
    font-size: 20px;
}
</style>
